<template>
  <div class="client-header">
    <div class="left">
      <el-image
        style="width: 150px; height: 44px"
        :src="leftUrl"
        @click="handleHome"
        fit="fill"
      />
    </div>
    <div class="right">
      <div class="info" v-if="isInfo">
        <div class="search hidden-xs-only">
          <el-select
            v-model="keyword"
            filterable
            remote
            placeholder="关键字搜索"
            reserve-keyword
            remote-show-suffix
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.tittle"
              :value="item.id"
              @click="handleRouter(item)"
            >
              <span>{{ item.tittle || "无" }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                contentType(item.type)
              }}</span>
            </el-option>
          </el-select>
        </div>
        <div v-if="isLoginState" class="intro item">
          <el-badge :value="unreadMessage" :hidden="unreadMessage == 0">
            <el-icon :size="20" @click="handleMessage"> <Bell color="#AAAAAA" /> </el-icon>
          </el-badge>
        </div>
        <div class="loginBtn" v-if="isLoginState">
          <div class="contro item" @click="handleControl">控制台</div>
          <div class="login item hidden-xs-only" @click="handleLogout">退出</div>
        </div>
        <div class="loginBtn" v-else>
          <div class="login item hidden-xs-only" @click="handleLogin">登录</div>
          <div class="register item">
            <el-button type="primary" @click="handleRegister">立即注册</el-button>
          </div>
        </div>
      </div>
      <slot name="main"></slot>
      <slot name="returnBack">
        <el-button type="primary" link @click="handleHome">回到首页</el-button>
      </slot>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ElMessageBox } from "element-plus";
import { localCache } from "@/utils/cache";
import { getAssetURL } from "@/utils/load_assets";
import { globalSearch } from "@/api/cloud/index";
import { contentType } from "@/utils/filter";
import { getMessagedNum } from '@/api/control/order'

import useSystemStore from "@/store/main/system/system";
const systemStore = useSystemStore();

import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const leftUrl = getAssetURL("common/logo.png");

const islo = ref(0); // 登录状态
const isLoginState = ref(false);
const options = ref([]); // 搜索列表
const keyword = ref(""); // 关键字
const loading = ref(false); // 加载状态
const unreadMessage = ref(0); // 未读消息

defineProps({
  isInfo: {
    type: Boolean,
    default: true,
  },
});

onMounted(() => {
  setTimeout(() => {
    islo.value = localCache.getCache("loginState");
    if (islo.value === 1) {
      let myInfo = localCache.getCache("myInformationAll");
      if (myInfo?.user.userName != undefined) {
        isLoginState.value = true;
        getUnreadMessage();
      }
    }
  }, 300);
});

watch(route, (val) => {
  if (isLoginState.value) {
    getUnreadMessage();
  }
});

watch(systemStore, (val) => {
  unreadMessage.value = val.unreadMessage;
});

// 获取未读消息
const getUnreadMessage = () => {
  getMessagedNum().then((res: any) => {
    unreadMessage.value = res.data
  }).catch(() => {
    unreadMessage.value = 0
  })
};

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm("确认退出当前登录状态吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      localCache.clearCache();
      isLoginState.value = false;
      router.push("/login");
    })
    .catch(() => {});
};

const handleRouter = (item) => {
  console.log(item);
  if (item.type == "governmentCloud") {
    router.push("/client/cloudGovernment");
  } else if (item.type == "cloudMarket") {
    router.push({
      path: "/client/cloudMarketplace/components/shopping",
      query: {
        marketId: item.id,
      },
    });
  } else if (item.type == "news") {
    router.push({
      path: "/client/news/details",
      query: {
        newsId: item.id,
      },
    });
  } else if (item.type == "help") {
    router.push({
      path: "/client/helpCenter/details",
      query: {
        helpId: item.id,
      },
    });
  } else if (item.type == "solution") {
    router.push({
      path: "/client/solution/detials",
      query: {
        parentId: item.id,
      },
    });
  }
};

// 跳转控制台
const handleControl = () => {
  router.push("/control/financialAfterSale/index");
};

// 跳转登录
const handleLogin = () => {
  router.push("/login");
};

// 注册
const handleRegister = () => {
  router.push("/register");
};

// 跳转首页
const handleHome = () => {
  router.push("/client/home");
};

// 跳转我的消息
const handleMessage = () => {
  router.push("/client/myMessage");
};

// 全局搜索
const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true;
    let data = {
      keyword: query,
    };
    globalSearch(data)
      .then((res) => {
        options.value = res.data;
      })
      .finally(() => {
        loading.value = false;
      });
  } else {
    options.value = [];
  }
};
</script>
<style lang="less" scoped>
.client-header {
  display: flex;
  height: 64px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
  }

  .info {
    display: flex;
    align-items: center;
    .loginBtn {
      display: flex;
      align-items: center;
    }
    .item {
      cursor: pointer;
      margin-left: 20px;
    }
  }

  .right {
    display: flex;
    align-items: center;

    :deep(.el-input-group__append) {
      background-color: #fff;
    }
  }
}
</style>
